<template>
	<view class="nav-bar">
	    <image src="../../static/图片/软协.png" mode=""></image>
	</view>
	<view class="container">
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" style="height: 321px; width: 100%;">
			<swiper-item>
				<image src="/static/图片/6.jpg" mode=""></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/图片/7.jpg" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="box">
			<view class="banner">
				<view>
					<image src="/static/图片/notice.jpg" mode=""></image>
					<view>协会通知</view>
					
				</view>
				<view @click="gotoCompetition">
					<image src="/static/图片/consulting .jpg" mode=""></image>
					<view >赛事咨询</view>
					
				</view>
				<view>
					<image src="/static/图片/signup.jpg" mode=""></image>
					<view>我要报名</view>
					
				</view>
				<view @click="gotoLeaning">
					<image src="/static/图片/information.jpg" mode=""></image>
					<view>学术资料</view>
					
				</view>
				<view @click="gotoActivity">
					<image src="/static/图片/activity.jpg" mode=""></image>
					<view>协会活动</view>
				</view>
			</view>
			<view class="footer">
			  <scroll-view scroll-x="true" style="white-space: nowrap;">
			    <image src="../../static/图片/1.png" mode=""></image>
			    <image src="../../static/图片/4.png" mode=""></image>
			    <image src="../../static/图片/2.png" mode=""></image>
			    <image src="../../static/图片/3.png" mode=""></image>
			  </scroll-view>
			</view>
	</view>
	<view>
			<TabBar></TabBar>
	</view>
		</view>
	
</template>

<script setup>
import TabBar from '@/components/tabBar/index.vue'

const gotoCompetition = () => { //赛事咨询
	uni.navigateTo({
		url:'/pages/shengsai/index'
	})
}

const gotoActivity = () => { //活动
	uni.navigateTo({
		url:'/pages/activities/index'
	})
}

const gotoLeaning = () => { //学习资料
	uni.navigateTo({
		url:'/pages/Learning-materials/index'
	})
}
</script>

<style scoped lang="scss">
	
	.nav-bar {
	  display: flex;
	  padding: 0 10rpx;
	  background-color:transparent;
	  position: fixed;
	  top:50rpx;
	  left: 0;
	  right: 0;
	  height:60rpx;
	  z-index: 9999;
	}
	
	.nav-bar image {
	  width: 350rpx; 
	  height: 70rpx;
	  position: fixed;
	  left:150rpx;
	}
	.swiper image{
		position: relative;
		width: 100%;
		height: 100%;
	}
	
	.box{
		position: absolute;
		top: 574rpx;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		background-color:#fff;
		border-radius: 35rpx;
		box-sizing: border-box;
	}
	
	.banner{
		display: flex;
		justify-content: space-around;
		padding-top: 35rpx;
		padding-bottom: 35rpx;
	}
	.banner>view{
		text-align: center;
	}
	.banner image{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
	
	.footer image{
		height: 373rpx;
		width: 226rpx;
		border-radius: 35rpx;
		margin-left: 40rpx;
	}

</style>
